<template>
  <div>
    <div class="title">
      <p>联系客服</p>
    </div>
    <div class="title-b">
      <img
        src="https://res.suning.cn/project/passport/login/wapV8/images/login-icon.png"
        alt=""
      />
      <span>欢迎登录苏宁易购</span>
    </div>
    <div class="center">
      <span class="ipone">请输入手机号</span>
      <p class="border">—————————————————</p>
      <span>———————————</span>
      <button class="btn">获取验证码</button>
      <p class="c-title">未注册的手机号验证后自动注册</p>
      <button class="bton">登录</button>
      <p class="zh">账号密码登录</p>
    </div>
    <div class="footer">
         <span>————   其他登录方式   ————</span>
         <div class="left">
            <img src="https://res.suning.cn/project/passport/login/wapV8/images/icon_qq.png" alt="">
         </div>
         <div class="right">
            <img src="https://res.suning.cn/project/passport/login/wapV8/images/icon_epp.png" alt="">
         </div>
         <p>我同意</p>
         <span class="f-bottom">《苏宁易购会员章程》《易付宝协议》</span>
    </div>
  </div>
</template>

<script>
export default {
    name:'Trolley'
};
</script>

<style scoped>
.title p {
    font-size:0.2rem;
    margin-left:80%;
    margin-top:5%;
}
.title-b img{
    width: 1rem;
    height:1rem;
    display: block;
    margin-left:5%;
    margin-top:10%;
}
.title-b span{
    display: block;
    margin-left:22%;
    margin-top:-10%;
}
.center{
    position: relative;
}
.center .ipone{
    display: block;
    margin-top:20%;
    font-size:0.3rem;
    color:#ccc;
    margin-left:5%;
}
.center .border{
    width:50%;
    display: block;
    margin-left:5%;
}
.center span{
    margin-left:5%;
    margin-top:15%;
    display: block;
}
.center .btn{
    width: 2rem;
    height: 1rem;
    border:0;
    margin-top:-1.2rem;
    margin-left:4.5rem;
    border:1px solid #ccc;
    color:#ccc;
    border-radius:5px;
    position: absolute;
    background:#fff;
}
.center .c-title{
    display:block;
    font-size:0.2rem;
    margin-left:5%;
}
.center .bton{
    width:6rem;
    height:1rem;
    background: #fc0;
    color:#000;
    border:1px solid #000;
    display: block;
    font-weight:bold;
    text-align: center;
    font-size:0.2rem;
    border-radius:10px;
    margin-left:5%;
    margin-top:8%;
}
.center .zh{
    font-size:0.3rem;
    margin-left:32%;
    margin-top:5%;
}
.footer span{
    font-size:0.2rem;
    display: block;
    margin-left:18%;
    margin-top:8%;
}
.left img{
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    margin-left:25%;
    margin-top:5%;
}
.right img{
    width:0.8rem;
    height:0.8rem;
    display: block;
    margin-left:55%;
    margin-top:-10%;
}
.footer p{
    display:block;
    color:#ccc;
    margin-left:14%;
    margin-top:5%;
    font-size:0.2rem;
}
.footer .f-bottom{
    display:block;
    color:#000;
    margin-left:25%;
    margin-top:-5%;
    font-size:0.2rem;
}
</style>